<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="tf-image-grid.html">
<link rel="import" href="../tf-dashboard-common/tf-no-data-warning.html">
<link rel="import" href="../tf-backend/tf-backend.html">

<!--
tf-image-dashboard displays a dashboard that loads images from a TensorFlow run.
-->
<dom-module id="tf-image-dashboard">
  <template>
    <div class="center">
      <tf-no-data-warning
        data-type="image"
        show-warning="[[dataNotFound]]"
      ></tf-no-data-warning>
      <tf-image-grid
        id="imageGrid"
        run-to-images="[[run2tag]]"
        images-generator="[[dataProvider]]"
        tags="[[tags]]"
        runs="[[runs]]"
      ></tf-image-grid>
    </div>

    <style>
      .center {
        padding-left: 10px;
        padding-right: 10px;
        height: 100%;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      :host {
        height: 100%;
        display: block;
      }

    </style>
  </template>
  <script>
    Polymer({
      is: "tf-image-dashboard",
      properties: {
        dataType: {value: "image"},
      },
      behaviors: [TF.Backend.Behavior],
      attached: function() {
        this.async(function() {
          this.fire("rendered");
        });
      },
      _hasImages: function(runToImagesChange) {
        return _.values(runToImagesChange.base).some(function(arr) {
          return arr.length > 0;
        });
      },
    });
  </script>
</dom-module>
